<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>拼图</title>
		<script src="../static/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/bootstrap/3.3.7/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/echarts/4.0.2/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/echarts-gl/1.0.2/echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/bootstrap/3.3.7/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../static/element-ui/2.1.0/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hou-tai.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/hou-tai.css" />
	</head>

	<body>
		<div id="app">
			<hou-tai>
				<div class="pin-tu" @keyup.up="anJian(-1, 0)" @keyup.down="anJian(1, 0)" @keyup.left="anJian(0, -1)" @keyup.right="anJian(0, 1)">
					<el-row>
						<el-col :span="12">
							时间：{{t}}秒<br /><br />
							<el-input-number v-model="n0" :disabled="s" :min="3" :max="9"></el-input-number>
							<el-button type="success" @click='kaiShi(n0)'>开始</el-button>
							<el-button type="danger" @click='jieShu()'>结束</el-button>
							<br /><br />
							<table align="center" border="1px">
								<tr v-for="(r, i) in a">
									<td align="center" v-for="(d, j) in r" @click="dianJi(i, j)" :bgcolor="d == n * n ? '#FFFFFF' : '#409EFF'">
										<font size=6 color="#FFFFFF" v-if="d != n * n">{{d}}</font>
									</td>
								</tr>
							</table>
						</el-col>
						<el-col :span="12">
							排行榜
							<el-button type="info" size="mini" @click='qingKong()'>清空</el-button>
							<table align="center">
								<tr>
									<th>名次</th>
									<th>姓名</th>
									<th>成绩</th>
								</tr>
								<tr v-for="(p, i) in paiHangBang[n0]">
									<td>{{i + 1}}</td>
									<td>{{p.xm}}</td>
									<td>{{p.cj}}</td>
								</tr>
							</table>
						</el-col>
					</el-row>
				</div>
			</hou-tai>
		</div>
		<script src="js/pin-tu.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/pin-tu.css" />
	</body>

</html>